<template>
  <div>
    <el-dialog :title="!form.id ? '新增岗位' : '编辑岗位'" :visible="dialogVisible" width="800px" :append-to-body="true" :show-close="false">
      <span slot="title" style="display: flex; justify-content: space-between; line-height: 24px; font-size: 18px; color: #72767b;">
        <span>{{!form.id ? '新增岗位' : '编辑岗位'}}</span>
        <span style="cursor: pointer; font-size: 20px;">
          <i class="el-icon-delete" style="border-right: 1px solid #CCC; margin-right: 30px; padding-right: 30px" @click="delDepartment" v-if="form.id"></i>
          <i class="el-icon-close" @click="dialogVisible=false"></i>
        </span>
      </span>
      <div class="content">
        <el-form label-width="100px" :label-position="'left'">
          <el-form-item label="岗位名称">
            <span style="color: red; position: absolute; left: -110px;">*</span>
            <el-input v-model="form.departmentName"></el-input>
          </el-form-item>
          <el-form-item label="上级部门">
            <!-- <span class="over-dept" v-if="!form.departmentBelongId" @click="showOrganizationDialog">选择</span>
            <span class="over-dept" v-else @click="showOrganizationDialog">{{form.departmentBelongName}}</span> -->
            <span>{{form.departmentBelongName}}</span>
          </el-form-item>
          <el-form-item label="岗位负责人">
            <div class="select-btn" v-if="form.departmentPrincipalId">
              <span><i class="el-icon-user"></i></span>{{form.departmentPrincipalName}}
              <div class="del" @click="delMember('departmentPrincipalIdArr','departmentPrincipalName','departmentPrincipalId', 'departmentPrincipalAvator', 'departmentPrincipalNameArr', 0)">移除</div>
            </div>
            <div v-else @click="selectDingUsers('departmentPrincipalIdArr','departmentPrincipalName','departmentPrincipalId', 'departmentPrincipalAvator', 'departmentPrincipalNameArr', 1)" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitDepartment">保存</el-button>
            <el-button size="mini" @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="公司部门" :visible.sync="organizationDialogVisible" width="800px" :append-to-body="true">
      <div style="height: 300px; overflow: auto;" class="organization-wrapper">
        <organization ref="department" @curOrganization="getOrganization" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from "@/utils/formUtil";
import organization from './component/organization'

export default {
  data () {
    return {
      organizationDialogVisible: false,
      dialogVisible: false,
      form: {
        departmentName: '',
        departmentBelongId: '',
        departmentBelongName: '',
        departmentLevel: 1,
        departmentPrincipalIdArr: [],
        departmentPrincipalName: '',
        departmentPrincipalId: '',
        departmentPrincipalAvator: '',
        departmentPrincipalNameArr: [],
      }
    };
  },
  mixins: [dingMixin],
  components: {
    organization
  },
  mounted () {
    
  },
  methods: {
    async init(type, data) {
      this.dialogVisible = true
      if(this.$refs.department) this.$refs.department.getOrganization();
      if(type === 'add') {
        formUtil.resetData(this.form);
        this.form.departmentLevel = 1;
        if(data.id) {
          this.form.departmentBelongId = data.id;
          this.form.departmentBelongName = data.departmentName;
          this.form.departmentLevel = Number(data.departmentLevel) + 1;
        }
      } else if(type === 'edit') {
        this.form = await this.$httpN.postB('lkr/organization/info/'+data.id);
        this.form.departmentPrincipalNameArr = this.form.departmentPrincipalName.split(',');
        this.form.departmentPrincipalIdArr = this.form.departmentPrincipalId.split(',');
      }
    },
    delMember(ids, name, idsStr, avator, names, idx) {
      this.form[avator] = [];
      this.form[names].splice(idx,1); 
      this.form[ids].splice(idx,1); 
      this.form[name] = this.form[names].join(',')
      this.form[idsStr] = this.form[ids].join(',')
    },
    selectDingUsers(ids, name, idsStr, avator, names, num){
      this.complexPicker(num, [], this.form[ids]).then((data)=>{
        this.form[ids] = data.map(item => item.emplId);
        this.form[avator] = data.map(item => item.avatar)
        this.form[names] = data.map(item => item.name)
        this.form[name] = this.form[names].join(',');
        this.form[idsStr] = this.form[ids].join(',')
      })
    },
    showOrganizationDialog() {
      this.organizationDialogVisible = true;
    },
    getOrganization(data) {
      this.organizationDialogVisible = false;
      this.form.departmentBelongId = data.id;
      this.form.departmentBelongName = data.departmentName;
      this.form.departmentLevel = Number(data.departmentLevel) + 1;
    },
    async submitDepartment() {
      if(!this.form.departmentName) return this.$message.error('请输入岗位名称');
      if(!await this.$httpN.postB(this.form.id ? 'lkr/organization/departmentUpdate' : 'lkr/organization/departmentSave', this.form)) return
      formUtil.submitSuccess('保存成功');
      this.dialogVisible = false;
      this.$emit("refreshOrganization");
      if(this.$refs.department) this.$refs.department.getOrganization()
    },
    async delDepartment() {
      formUtil.submitConfirm('该组织架构下可能存在目标，您确定要删除吗', async ()=> {
        if(!await this.$httpN.postB('lkr/organization/departmentDelete', {id: this.form.id})) return
        formUtil.submitSuccess('删除成功');
        this.dialogVisible = false;
        this.$emit("refreshOrganization")
        if(this.$refs.department) this.$refs.department.getOrganization()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.organization-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.organization-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.organization-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.content {
  .over-dept {
    cursor: pointer;
    color: #409EFF;
    position: relative;
    i {
      position: absolute;
      right: -14px;
      top: -14px;
      cursor: pointer;
    }
  }
  .select-btn{
    float:left;
    font-weight: normal;
    margin-right: 5px;
    margin-bottom: 10px;
    width: 80px;
    height: 28px;
    border-radius: 30px;
    background: #FAFAFA;
    border: 1px solid #ECECEC;
    position: relative;
    padding-left: 21px;
    line-height: 28px;
    color: #7982A7;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    span{
      position: absolute;
      top: 1px;
      left: 1px;
      display:block;
      height: 24px;
      width: 24px;
      background: #CACACA;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
      img{
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
      i {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
    }
    .del{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      color: white;
      text-align: center;
      background:rgba(130, 130, 130, 0.9);
      display: none;
    }
    &:hover{
      .del, .close{
        display: block;
      }
    }
  }
}
</style>